<template>
	<view class="page-height">
		<i-top-bar title="密码设置"> </i-top-bar>
		<view class="page-content">
			<view class="list">
				<view class="line">
					<text class="label">旧密码</text>
					<input type="password" v-model="old_pass" placeholder="请输入旧密码" class="input" />
				</view>
				<view class="line">
					<text class="label">新密码</text>
					<input type="password" v-model="new_pass" placeholder="请输入新密码" class="input" />
				</view>
				<view class="line">
					<text class="label">确认密码</text>
					<input type="password" v-model="new_pass_con" placeholder="请再次确认密码" class="input" />
				</view>
			</view>

			<view class="btn-view">
				<button class="btn" @click="onSave()">保存</button>
			</view>

		</view>
		<u-toast ref="uToast"></u-toast>
		<confirm ref="save_confirm" content="是否提交修改密码" @confirm="confirmSave()"></confirm>
		<pass-edit-success ref="success"></pass-edit-success>
	</view>
</template>
<script>
	import PassEditSuccess from "./components/pass-edit-success.vue"
	export default {
		components: { PassEditSuccess },
		data() {
			return {
				old_pass: "",
				new_pass: "",
				new_pass_con: "",
			};
		},

		onLoad() {
			this.username = this.user.username
		},

		methods: {
			onSave() {
				if (!this.old_pass) return this.fail("请输入旧密码")
				if (!this.new_pass) return this.fail("请输入新密码")
				if (this.new_pass !== this.new_pass_con) return this.fail('两次密码输入不一致')
				this.$refs.save_confirm.show()

			},
			confirmSave() {
				const params = {
					lowpassword: this.old_pass,
					newpassword: this.new_pass,
				}
				if (this.isRequest()) return false;
				this.api.post("/api/user/resetuserpwd", { params: params }).then(res => {
					this.$store.commit('loginout')
					this.$refs.success.show()
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 1;
	}

	.list {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding: 0 30rpx;

		.line {
			height: 116rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #E5E5E5;

			.label {
				width: 180rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.input {
				flex: 1;
			}

			.ioc {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.line:last-child {
			border: none;
		}
	}

	.btn-view {
		margin-top: auto;
		padding: 0 30rpx;
		margin-bottom: 250rpx;
	}
</style>